<template>

  <Card class="ll page-fill" style="height:800px">
    <div>贷款产品</div>
    <div style="width:600px;margin:80px auto">
      <Row type="flex" align="middle">
        <Col span="8">产品类型:</Col>
        <Col span="14">
        <Select v-model="titleCase" style="width:200px" :disabled="allMark" @on-change="itemChange">
          <Option v-for="item in productList" :value="item.value" :key="item.value">{{ item.label }}</Option>
        </Select>
        </Col>
      </Row>
      <br>
      <Row type="flex" align="middle">
        <Col span="8">版本号:</Col>
        <Col span="16">
        <Input v-model="name" placeholder="请输入" :disabled="allMark" style="width: 50px"></Input>
        <Input v-model="date" placeholder="请输入" :disabled="allMark" style="width: 100px"></Input>
        <Input v-model="sequence" placeholder="请输入" :disabled="allMark" style="width: 50px"></Input>
        </Col>
      </Row>
      <br>
      <Row type="flex" align="middle">
        <Col span="8">描述:</Col>
        <Col span="16">
        <Input placeholder="请输入" :disabled="allMark" style="width: 200px" v-model="desc"></Input>
        </Col>
      </Row>
      <br>

      <Row type="flex" align="middle" style="height:32px">
        <Col span="8">渠道:</Col>
        <Col span="16">
        <CheckboxGroup v-model="channelList" :disabled="allMark">
          <Checkbox :disabled="allMark" v-for="item in channel" :key="item.value" :label='item.value'>{{item.label}}</Checkbox>
        </CheckboxGroup>
        </Col>
      </Row>
      <br>
      <Row type="flex" align="middle" style="height:32px">
        <Col span="8">期限:</Col>
        <Col span="16">
        <CheckboxGroup v-model="termList" :disabled="allMark">
          <Checkbox :disabled="allMark" v-for="item in term" :key="item.value" :label='item.value'>{{item.label}}</Checkbox>
        </CheckboxGroup>
        </Col>
      </Row>
      <br>
      <!-- -->
      <!-- <Row type="flex" align="middle" style="height:32px">
        <Col span="8">等级:</Col>
        <Col span="16">
        <Select v-model="grade" style="width:200px" :disabled="allMark">
          <Option v-for="item in gradeList" :value="item.value" :key="item.value">{{ item.label }}</Option>
        </Select>
        </Col>
      </Row> -->
      <Row type="flex" align="middle" style="height:32px">
        <Col span="8">等级:</Col>
        <Col span="16">
        <CheckboxGroup v-model="gradeSelectList" :disabled="allMark">
          <Checkbox :disabled="allMark" v-for="item in gradeList" :key="item.value" :label='item.value'>{{item.label}}</Checkbox>
        </CheckboxGroup>
        </Col>
      </Row>
      <br>
      <!-- <Row type="flex" align="middle">
                <Col span="8">机构:</Col>
                <Col span="16">
                <Select v-model="institution" style="width:200px" :disabled="allMark">
                    <Option v-for="item in institutionList" :value="item.value" :key="item.value">{{ item.label }}</Option>
                </Select>
                </Col>
            </Row>
            <br> -->
      <Row type="flex" align="middle">
        <Col span="8">宽限日:</Col>
        <Col span="16">
        <Input placeholder="请输入" :disabled="allMark" style="width: 200px" v-model="graceDays" @on-blur="validate"></Input>
        </Col>
      </Row>
      <br>
      <Row type="flex" align="middle">
        <Col span="8">计费周期:</Col>
        <Col span="16">
        <Select v-model="billingCycle" style="width:200px" :disabled="allMark">
          <Option v-for="item in billingCycleList" :value="item.value" :key="item.value">{{ item.label }}</Option>
        </Select>
        </Col>
      </Row>
      <br>
      <Row type="flex" align="middle">
        <Col span="8">还款顺序:</Col>
        <Col span="16">
        <Select v-model="repaySeq" style="width:200px" :disabled="allMark">
          <Option v-for="item in repaySeqList" :value="item.value" :key="item.value">{{ item.label }}</Option>
        </Select>
        </Col>
      </Row>
      <br>
      <Row type="flex" align="middle">
        <Col span="8">还款计算方式:</Col>
        <Col span="16">
        <Select v-model="amortMethod" style="width:200px" :disabled="allMark">
          <Option v-for="item in amortMethodList" :value="item.value" :key="item.value">{{ item.label }}</Option>
        </Select>
        </Col>
      </Row>
      <br>
      <Row type="flex" align="middle">
        <Col span="12" style="text-align:center">
        <Button type="primary" @click="conf" size="small" :disabled="allMark">确认</Button>
        </Col>
        <Col span="12">
        <Button type="primary" @click="reback" size="small">返回</Button>
        </Col>
      </Row>
    </div>
  </Card>
</template>

<script>
export default {
  data () {
    return {
      allMark: false,
      channelList: [],
      channel: [],
      termList: [],
      term: [],
      gradeList: [],
      gradeSelectList: [],
      titleCase: '',
      name: '',
      date: '',
      sequence: '',
      channelOne: '',
      institution: '',
      billingCycle: '',
      repaySeq: '',
      amortMethod: '',
      graceDays: '',
      grade: '',
      amortMethodList: [],
      repaySeqList: [],
      desc: '',
      billingCycleList: [
        {
          value: 'A000',
          label: '天'
        },
        {
          value: 'A004',
          label: '月'
        }
      ],
      institutionList: [],
      productList: [],
      rules: {
        graceDays: [
          { pattern: this.$util.regExpNum, message: '宽限期不能为非数字', trigger: 'blur' }
        ]
      }
    }
  },
  created () {
    this.$ajax = this.$util.ajax(this.$appContext.marvels_core_product)
    this.$ajax.post(this.$appContext.marvels_core_product + 'product/mcpt/service/searchProduct', {}).then(re => {
      var allData = re.data.data
      let tmp = []
      tmp.push({
        value: '',
        label: '请选择'
      })
      for (var i = 0; i < allData.length; i++) {
        tmp.push({
          value:
            allData[i].titleCase +
            '-' +
            allData[i].productType +
            '-' +
            allData[i].productTypeName,
          label: allData[i].productTypeName
        })
      }
      this.productList = tmp
    })
    this.initselector()
  },
  methods: {
    initselector () {
      this.$ajax.post(this.$appContext.marvels_core_product + 'product/mcpt/service/getAllSelector', {}).then(re => {
        var allData = re.data.data
        // 等级
        if (allData.customerTypes && allData.customerTypes.length > 0) {
          allData.customerTypes.forEach(item => {
            this.gradeList.push({
              value: item.customerType,
              label: item.customerTypeDesc
            })
          })
        }
        // 还款顺序
        if (allData.paymentSequence && allData.paymentSequence.length > 0) {
          allData.paymentSequence.forEach(item => {
            this.repaySeqList.push({
              value: item.paymentSequenceCode,
              label: item.paymentSequenceName
            })
          })
        }
        // 还款计算方式
        if (allData.amortMethodList && allData.amortMethodList.length > 0) {
          allData.amortMethodList.forEach(item => {
            this.amortMethodList.push({
              value: item.amortCode,
              label: item.description
            })
          })
        }
      })
    },
    validate () {
      if (this.graceDays != null && this.graceDays !== '') {
        if (!this.$util.regExpNum.test(this.graceDays)) {
          this.$Message.warning('宽限期不能为非数字')
          return false
        }
        return true
      }
    },
    itemChange () {
      var vm = this
      var nowDate = new Date()
      var year = nowDate.getFullYear()
      var month =
        nowDate.getMonth() + 1 < 10
          ? '0' + (nowDate.getMonth() + 1)
          : nowDate.getMonth() + 1
      var day =
        nowDate.getDate() < 10 ? '0' + nowDate.getDate() : nowDate.getDate()
      var dateStr = year + '' + month + day
      vm.date = dateStr
      vm.sequence = '1'
      var name = vm.titleCase.split('-')[0]
      if (name && name !== '' && name != null && name !== 'null' && name !== 'NULL') {
        vm.name = name
      }
      let tmp = []
      let channelTmp = []
      this.$ajax.post(this.$appContext.marvels_core_product + 'product/mcpt/service/searchChannelAndTerm', { productType: vm.titleCase.split('-')[1] })
        .then(re => {
          for (let i = 0; i < re.data.data.termList.length; i++) {
            tmp.push({
              value: re.data.data.termList[i].term + '',
              label: re.data.data.termList[i].term + '期'
            })
          }
          for (let i = 0; i < re.data.data.channelList.length; i++) {
            if (re.data.data.channelList[i].channelCode === 103) {
              channelTmp.push({
                value: re.data.data.channelList[i].channelCode + '',
                label: '线上'
              })
            } else if (re.data.data.channelList[i].channelCode === 101) {
              channelTmp.push({
                value: re.data.data.channelList[i].channelCode + '',
                label: '保险'
              })
            } else if (re.data.data.channelList[i].channelCode === 102) {
              channelTmp.push({
                value: re.data.data.channelList[i].channelCode + '',
                label: '银行'
              })
            }
          }
          vm.channel = channelTmp
          vm.term = tmp
        })
        .catch(er => { })
    },
    reback () {
      var vm = this
      vm.$router.push('product')
    },
    conf () {
      var vm = this
      if (!vm.validate()) return
      if (vm.titleCase === '') {
        this.$Message.warning('产品类型不能为空')
        return
      }
      if (vm.channelList.length === 0) {
        this.$Message.warning('请选择渠道,生成名字用！')
        return
      }
      if (vm.termList.length === 0) {
        this.$Message.warning('请选择期限,生成名字用！')
        return
      }
      if (vm.gradeSelectList.length === 0) {
        this.$Message.warning('请选择等级')
        return
      }
      if (vm.billingCycle === '') {
        this.$Message.warning('请选择计费周期')
        return
      }
      if (vm.repaySeq === '') {
        this.$Message.warning('请选择还款顺序')
        return
      }
      if (vm.amortMethod === '') {
        this.$Message.warning('请选择还款计算方式')
        return
      }

      this.$Modal.confirm({
        title: '生成版本小类',

        content: '确定新增?',

        okText: '确定',

        cancelText: '取消',
        onOk: () => {
          var param = {
            productTypeName: vm.titleCase.split('-')[2],
            productType: vm.titleCase.split('-')[1],
            productVersion: vm.name + '-' + vm.date + '-' + vm.sequence,
            channelList: vm.channelList,
            termList: vm.termList,
            gradeList: vm.gradeSelectList,
            billingCycle: vm.billingCycle,
            repaySeq: vm.repaySeq,
            amortMethod: vm.amortMethod,
            desc: vm.desc,
            graceDays: vm.graceDays

          }
          this.$ajax.post(this.$appContext.marvels_core_product + 'product/mcpt/service/generateVersion', param)
            .then(re => {
              if (re.data.code === 'success') {
                this.$Message.success(re.data.data)
                vm.$router.push('product')
              } else {
                this.$Message.error(re.data.data)
              }
            })
            .catch(er => { })
        }
      })
      // vm.$router.push({ name: "dkcpdetail", params:{channelList:vm.channelList,termList:vm.termList,gradeList:vm.gradeList}});
    }
  }
}
</script>

<style lang="less">
.ll {
}
#middle {
  margin-top: 100px;
  margin-left: 636px;
  width: 1000px;
}
#middle .v-form-label {
  font-size: 15px;
}
#middle .versionNum {
  width: 80px;
}
#middle .channel {
  font-size: 12px;
}
.bt {
  margin: 10px 80px;
}
.check {
  display: inline-block;
}
</style>
